<!--buat menu timeline-->
<html> 
    <head>
        <meta charset="UTF-8">
        <!--Add-->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href='http://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/templatemo_style.css">

        <link rel="stylesheet" href="css/timeline.css"> 
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
        <link rel="stylesheet" type="text/css" href="css/tabmenu.css" />



        <!--End Add-->
        <title>Kronologi Sosial</title>

        <script>
            function umum(ix)
            {
                var xmlhttp;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function ()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        if (ix == 1) {
                            document.getElementById("masa-depan-umum").innerHTML = xmlhttp.responseText;
                        } else {
                            document.getElementById("masa-lalu-umum").innerHTML = xmlhttp.responseText;
                        }
                    }
                }
                xmlhttp.open("GET", "kronologi-umum-sk.php?q=" + ix, true);

                xmlhttp.send();
            }
            function pengolahan(ix)
            {
                var xmlhttp;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function ()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        if (ix == 1) {
                            document.getElementById("masa-depan-pengolahan").innerHTML = xmlhttp.responseText;
                        } else {
                            document.getElementById("masa-lalu-pengolahan").innerHTML = xmlhttp.responseText;
                        }
                    }
                }
                xmlhttp.open("GET", "kronologi-pengolahan-sk.php?q=" + ix, true);

                xmlhttp.send();
            }
            function metodologi(ix)
            {
                var xmlhttp;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function ()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        if (ix == 1) {
                            document.getElementById("masa-depan-metodologi").innerHTML = xmlhttp.responseText;
                        }
                        else {
                            document.getElementById("masa-lalu-metodologi").innerHTML = xmlhttp.responseText;
                        }
                    }
                }
                xmlhttp.open("GET", "kronologi-metodologi-sk.php?q=" + ix, true);

                xmlhttp.send();
            }

            function kuesioner(ix)
            {
                var xmlhttp;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function ()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        if (ix == 1) {
                            document.getElementById("masa-depan-kuesioner").innerHTML = xmlhttp.responseText;
                        }
                        else {
                            document.getElementById("masa-lalu-kuesioner").innerHTML = xmlhttp.responseText;
                        }
                    }
                }
                xmlhttp.open("GET", "kronologi-kuesioner-sk.php?q=" + ix, true);

                xmlhttp.send();
            }
            function analisis(ix)
            {
                var xmlhttp;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function ()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        if (ix == 1) {
                            document.getElementById("masa-depan-analisis").innerHTML = xmlhttp.responseText;
                        }
                        else {
                            document.getElementById("masa-lalu-analisis").innerHTML = xmlhttp.responseText;
                        }
                    }
                }
                xmlhttp.open("GET", "kronologi-analisis-sk.php?q=" + ix, true);

                xmlhttp.send();
            }

        </script>
    </head>
    <body>
        <?php
        include 'koneksiDB.php';
        include 'header-sk.php';

        $seminggulagi = date("Y-m-d", strtotime("+1 week"));
        $qanalisis = "SELECT * FROM datatimeline where kode_bidang='3'  and kode_seksi=2 and tanggal between '" . date('Y-m-d') . "' and '" . $seminggulagi . "' ORDER BY tanggal desc";
        $ranalisis = $conn->query($qanalisis);
        $analisis1 = "SELECT * FROM datatimeline WHERE kode_bidang='3' and kode_seksi='2' and status='1'";
        $analisis10 = "SELECT * FROM datatimeline WHERE  kode_bidang='3' and kode_seksi='2'";
        $ranalisis1 = $conn->query($analisis1);
        $ranalisis10 = $conn->query($analisis10);
        $progressanalisis = $ranalisis1->num_rows * 100 / $ranalisis10->num_rows;



        $all1 = "SELECT * FROM datatimeline WHERE kode_bidang='3' and status='1'";
        $all10 = "SELECT * FROM datatimeline WHERE  kode_bidang='3'";
        $rall1 = $conn->query($all1);
        $rall10 = $conn->query($all10);
        $progressall = $rall1->num_rows * 100 / $rall10->num_rows;

        $qmetodologi = "SELECT * FROM datatimeline where kode_bidang='3'  and kode_seksi=4 and tanggal between '" . date('Y-m-d') . "' and '" . $seminggulagi . "' ORDER BY tanggal desc";
        $rmetodologi = $conn->query($qmetodologi);
        $metodologi1 = "SELECT * FROM datatimeline WHERE kode_bidang='3' and kode_seksi='4' and status='1'";
        $metodologi10 = "SELECT * FROM datatimeline WHERE  kode_bidang='3' and kode_seksi='4'";
        $rmetodologi1 = $conn->query($metodologi1);
        $rmetodologi10 = $conn->query($metodologi10);
        $progressmetodologi = $rmetodologi1->num_rows * 100 / $rmetodologi10->num_rows;


        $qkuesioner = "SELECT * FROM datatimeline where kode_bidang='3'  and kode_seksi=3 and tanggal between '" . date('Y-m-d') . "' and '" . $seminggulagi . "' ORDER BY tanggal desc";

        $rkuesioner = $conn->query($qkuesioner);
        $kuesioner1 = "SELECT * FROM datatimeline WHERE kode_bidang='3' and kode_seksi='3' and status='1'";
        $kuesioner10 = "SELECT * FROM datatimeline WHERE  kode_bidang='3' and kode_seksi='3'";
        $rkuesioner1 = $conn->query($kuesioner1);
        $rkuesioner10 = $conn->query($kuesioner10);
        $progresskuesioner = $rkuesioner1->num_rows * 100 / $rkuesioner10->num_rows;

        //where yourDate between date1 and date2

        $qumum = "SELECT * FROM datatimeline where kode_bidang='3'  and kode_seksi=6 and tanggal between '" . date('Y-m-d') . "' and '" . $seminggulagi . "' ORDER BY tanggal desc";
        $rumum = $conn->query($qumum);
        $umum1 = "SELECT * FROM datatimeline WHERE kode_bidang='3' and kode_seksi='6' and status='1'";
        $umum10 = "SELECT * FROM datatimeline WHERE  kode_bidang='3' and kode_seksi='6'";
        $rumum1 = $conn->query($umum1);
        $rumum10 = $conn->query($umum10);
        $progressumum = $rumum1->num_rows * 100 / $rumum10->num_rows;


        $qpengolahan = "SELECT * FROM datatimeline where kode_bidang='3'  and kode_seksi=5 and tanggal between '" . date('Y-m-d') . "' and '" . $seminggulagi . "' ORDER BY tanggal desc";
        $rpengolahan = $conn->query($qpengolahan);
        $pengolahan1 = "SELECT * FROM datatimeline WHERE kode_bidang='3' and kode_seksi='5' and status='1'";
        $pengolahan10 = "SELECT * FROM datatimeline WHERE  kode_bidang='3' and kode_seksi='5'";
        $rpengolahan1 = $conn->query($pengolahan1);
        $rpengolahan10 = $conn->query($pengolahan10);
        $progresspengolahan = $rpengolahan1->num_rows * 100 / $rpengolahan10->num_rows;
        ?>

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="heading-section">
                        <h2>Kronologi Sosial Kependudukan</h2>
                        <img src="images/under-heading.png" alt="" >
                    </div>
                </div>
            </div>
            <div id="tabs" class="tabs">
                <nav>
                    <ul>
                        <li><a href="#section-1" onclick="pbsemua()"><img src="images/icon/semuathumb.png" style="width:30px; height:30px"><span> All</span></a></li>
                        <li><a href="#section-2" onclick="pbanalisis()"><img src="images/icon/analisisthumb.png" style="width:30px; height:30px"><span> Analisis</span></a></li>
                        <li><a href="#section-3" onclick="pbmetodologi()"><img src="images/icon/metodologithumb.png" style="width:30px; height:30px"><span> Metodologi</span></a></li>
                        <li><a href="#section-4" onclick="pbkuesioner()"><img src="images/icon/kuesionerthumb.png" style="width:30px; height:30px"><span> Kuesioner</span></a></li>
                        <li><a href="#section-5" onclick="pbpengolahan()"><img src="images/icon/pengolahanthumb.png" style="width:30px; height:30px"><span> Pengolahan Data</span></a></li>
                        <li><a href="#section-6"onclick="pbumum()"><img src="images/icon/umumthumb.png" style="width:30px; height:30px"><span> Umum</span></a></li>
                    </ul>
                </nav>

                <div class="content col-md-12">
                    <section id="section-1">


                        <div class="col-md-12 col-sm-12">
                            <div class="judul-progress">Progress PKL 54 Bidang Sosial</div>
                            <div id='progressall' class="progresbarku">
                                <div id='labelall' class="progress-label">
                                </div>

                            </div>


                        </div>

                        <div class="col-md-6 col-sm-6">
                            <div class="judul-progress">Analisis</div>
                            <div id='progressanalisis2' class="progresbarku">
                                <div id='labelanalisis2' class="progress-label">

                                </div> 
                            </div>

                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="judul-progress">Metodologi</div>
                            <div id='progressmetodologi2' class="progresbarku">
                                <div id='labelmetodologi2' class="progress-label">

                                </div> </div>

                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="judul-progress">Kuesioner</div>
                            <div id='progresskuesioner2' class="progresbarku">
                                <div id='labelkuesioner2' class="progress-label">

                                </div> </div>

                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="judul-progress">Pengolahan</div>
                            <div id='progresspengolahan2' class="progresbarku">
                                <div id='labelpengolahan2' class="progress-label">

                                </div> 
                            </div>

                        </div>

                        <div class="col-md-3 col-sm-3"></div><div class="col-md-6 col-sm-6">
                            <div class="judul-progress">Umum</div>
                            <div id='progressumum2' class="progresbarku">
                                <div id='labelumum2' class="progress-label">

                                </div> 
                            </div>

                        </div>
                        <div class="col-md-3 col-sm-3"></div>
                    </section>

                    <section id="section-2">
                        <div class="judul-progress">Progress Analisis</div>
                        <div class="col-md-12 col-sm-12">
                            <div id='progressanalisis' class="progresbarku">
                                <div id='labelanalisis' class="progress-label">

                                </div> 
                            </div>

                        </div>

                        <div id="cd-timeline" class="cd-timeline cd-container">

                            <div class="cd-timeline-block">
                                <p class="bgsolid">
                                    <i class="fa fa-2x fa-clock-o" ></i>
                                </p> 

                            </div>

                            <div class="cd-timeline-block">
                                <div class="cd-timeline-btn" onClick="analisis(1)">

                                    <p>Tampilkan Masa Depan</p>
                                </div>
                            </div>

                            <div  id="masa-depan-analisis"></div>

                            <?php
                            if ($ranalisis->num_rows > 0) {

                                // output data of each row
                                while ($rows = $ranalisis->fetch_assoc()) {

                                    echo "<div class='cd-timeline-block'>";
                                    echo "<div class='cd-timeline-img'></div>";
                                    echo "<div class='cd-timeline-content' style='background:rgb(189,189,189)'>";
                                    echo "<h2>" . $rows['tema'] . "</h2>";
                                    echo "<p>" . $rows['rincian'] . "</p>";
                                    echo "<p>";

                                    if ($rows['status'] == 1) {
                                        echo 'status: terlaksana';
                                    } else {
                                        echo 'status: belum terlaksana';
                                    }
                                    echo "</p>";
                                    echo '<span class="cd-date">' . $rows['tanggal'] . '</span>';
                                    echo '</div></div> ';
                                }
                            } else {
                                echo "<div class='kosong'>";
                                echo "<p> Tidak ada jadwal diminggu ini</p>";
                                echo '</div> ';
                            }
                            ?>


                            <div id="masa-lalu-analisis"></div>
                            <div class="cd-timeline-block">
                                <div class="cd-timeline-btn" onClick="analisis(-1)">
                                    <p>Tampilkan Masa Lalu</p>
                                </div>
                            </div> <!-- cd-timeline-block -->

                        </div> <!-- cd-timeline -->

                    </section>

                    <section id="section-3">

                        <div class="judul-progress">Progress Metodologi</div>
                        <div class="col-md-12 col-sm-12">
                            <div id='progressmetodologi' class="progresbarku">
                                <div id='labelmetodologi' class="progress-label">

                                </div> </div>

                        </div>

                        <div id="cd-timeline" class="cd-timeline cd-container">

                            <div class="cd-timeline-block">
                                <p class="bgsolid">
                                    <i class="fa fa-2x fa-clock-o" ></i>
                                </p> 

                            </div>

                            <div class="cd-timeline-block">
                                <div class="cd-timeline-btn" onclick="metodologi(1)">

                                    <p>Tampilkan Masa Depan</p>
                                </div>
                            </div>

                            <div  id="masa-depan-metodologi"></div>

                            <?php
                            if ($rmetodologi->num_rows > 0) {

                                // output data of each row
                                while ($rows = $rmetodologi->fetch_assoc()) {

                                    echo "<div class='cd-timeline-block'>";
                                    echo "<div class='cd-timeline-img'></div>";
                                    echo "<div class='cd-timeline-content' style='background:rgb(189,189,189)'>";
                                    echo "<h2>" . $rows['tema'] . "</h2>";
                                    echo "<p>" . $rows['rincian'] . "</p>";
                                    echo "<p>";

                                    if ($rows['status'] == 1) {
                                        echo 'status: terlaksana';
                                    } else {
                                        echo 'status: belum terlaksana';
                                    }
                                    echo "</p>";
                                    echo '<span class="cd-date">' . $rows['tanggal'] . '</span>';
                                    echo '</div></div> ';
                                }
                            } else {
                                echo "<div class='kosong'>";
                                echo "<p> Tidak ada jadwal diminggu ini</p>";
                                echo '</div> ';
                            }
                            ?>


                            <div id="masa-lalu-metodologi"></div>
                            <div class="cd-timeline-block">
                                <div class="cd-timeline-btn" onClick="metodologi(-1)">
                                    <p>Tampilkan Masa Lalu</p>
                                </div>
                            </div> <!-- cd-timeline-block -->

                        </div> <!-- cd-timeline -->


                    </section>
                    <section id="section-4">
                        <div class="judul-progress">Progress Kuesioner</div>
                        <div class="col-md-12 col-sm-12">
                            <div id='progresskuesioner' class="progresbarku">
                                <div id='labelkuesioner' class="progress-label">

                                </div> </div>

                        </div>

                        <div id="cd-timeline" class="cd-timeline cd-container">

                            <div class="cd-timeline-block">
                                <p class="bgsolid">
                                    <i class="fa fa-2x fa-clock-o" ></i>
                                </p> 

                            </div>

                            <div class="cd-timeline-block">
                                <div class="cd-timeline-btn" onclick="kuesioner(1)">

                                    <p>Tampilkan Masa Depan</p>
                                </div>
                            </div>

                            <div  id="masa-depan-kuesioner"></div>

                            <?php
                            if ($rkuesioner->num_rows > 0) {

                                // output data of each row
                                while ($rows = $rkuesioner->fetch_assoc()) {

                                    echo "<div class='cd-timeline-block'>";
                                    echo "<div class='cd-timeline-img'></div>";
                                    echo "<div class='cd-timeline-content' style='background:rgb(189,189,189)'>";
                                    echo "<h2>" . $rows['tema'] . "</h2>";
                                    echo "<p>" . $rows['rincian'] . "</p>";
                                    echo "<p>";

                                    if ($rows['status'] == 1) {
                                        echo 'status: terlaksana';
                                    } else {
                                        echo 'status: belum terlaksana';
                                    }
                                    echo "</p>";
                                    echo '<span class="cd-date">' . $rows['tanggal'] . '</span>';
                                    echo '</div></div> ';
                                }
                            } else {
                                echo "<div class='kosong'>";
                                echo "<p> Tidak ada jadwal diminggu ini</p>";
                                echo '</div> ';
                            }
                            ?>


                            <div id="masa-lalu-kuesioner"></div>
                            <div class="cd-timeline-block">
                                <div class="cd-timeline-btn" onClick="kuesioner(-1)">
                                    <p>Tampilkan Masa Lalu</p>
                                </div>
                            </div> <!-- cd-timeline-block -->

                        </div> <!-- cd-timeline -->

                    </section>

                    <section id="section-5">
                        <div class="judul-progress">Progress Pengolahan</div>
                        <div class="col-md-12 col-sm-12">
                            <div id='progresspengolahan' class="progresbarku">
                                <div id='labelpengolahan' class="progress-label">

                                </div> 
                            </div>

                        </div>

                        <div id="cd-timeline" class="cd-timeline cd-container">

                            <div class="cd-timeline-block">
                                <p class="bgsolid">
                                    <i class="fa fa-2x fa-clock-o" ></i>
                                </p> 

                            </div>

                            <div class="cd-timeline-block">
                                <div class="cd-timeline-btn" onclick="pengolahan(1)">

                                    <p>Tampilkan Masa Depan</p>
                                </div>
                            </div>

                            <div  id="masa-depan-pengolahan"></div>

                            <?php
                            if ($rpengolahan->num_rows > 0) {

                                // output data of each row
                                while ($rows = $rpengolahan->fetch_assoc()) {

                                    echo "<div class='cd-timeline-block'>";
                                    echo "<div class='cd-timeline-img'></div>";
                                    echo "<div class='cd-timeline-content' style='background:rgb(189,189,189)'>";
                                    echo "<h2>" . $rows['tema'] . "</h2>";
                                    echo "<p>" . $rows['rincian'] . "</p>";
                                    echo "<p>";

                                    if ($rows['status'] == 1) {
                                        echo 'status: terlaksana';
                                    } else {
                                        echo 'status: belum terlaksana';
                                    }
                                    echo "</p>";
                                    echo '<span class="cd-date">' . $rows['tanggal'] . '</span>';
                                    echo '</div></div> ';
                                }
                            } else {
                                echo "<div class='kosong'>";
                                echo "<p> Tidak ada jadwal diminggu ini</p>";
                                echo '</div> ';
                            }
                            ?>

                            <div id="masa-lalu-pengolahan"></div>

                            <div class="cd-timeline-block">
                                <div class="cd-timeline-btn" onClick="pengolahan(-1)">
                                    <p>Tampilkan Masa Lalu</p>
                                </div>
                            </div> <!-- cd-timeline-block -->

                        </div> <!-- cd-timeline -->

                    </section>

                    <section id="section-6">
                        <div class="judul-progress">Progress Umum</div>
                        <div class="col-md-12 col-sm-12">
                            <div id='progressumum' class="progresbarku">
                                <div id='labelumum' class="progress-label">

                                </div>
                            </div>

                        </div>

                        <div id="" class="cd-timeline cd-container">

                            <div class="cd-timeline-block">
                                <p class="bgsolid">
                                    <i class="fa fa-2x fa-clock-o" ></i>
                                </p> 

                            </div>

                            <div class="cd-timeline-block">
                                <div class="cd-timeline-btn" onclick="umum(1)">

                                    <p>Tampilkan Masa Depan</p>
                                </div>
                            </div>

                            <div  id="masa-depan-umum">
                            </div>

                            <?php
                            if ($rumum->num_rows > 0) {

                                // output data of each row
                                while ($rows = $rumum->fetch_assoc()) {

                                    echo "<div class='cd-timeline-block'>";
                                    echo "<div class='cd-timeline-img'></div>";
                                    echo "<div class='cd-timeline-content' style='background:rgb(189,189,189)'>";
                                    echo "<h2>" . $rows['tema'] . "</h2>";
                                    echo "<p>" . $rows['rincian'] . "</p>";
                                    echo "<p>";

                                    if ($rows['status'] == 1) {
                                        echo 'status: terlaksana';
                                    } else {
                                        echo 'status: belum terlaksana';
                                    }
                                    echo "</p>";
                                    echo '<span class="cd-date">' . $rows['tanggal'] . '</span>';
                                    echo '</div></div> ';
                                }
                            } else {
                                echo "<div class='kosong'>";
                                echo "<p> Tidak ada jadwal diminggu ini</p>";
                                echo '</div> ';
                            }
                            ?>


                            <div id="masa-lalu-umum"></div>
                            <div class="cd-timeline-block">
                                <div class="cd-timeline-btn" onclick="umum(-1)">
                                    <p>Tampilkan Masa Lalu</p>
                                </div>
                            </div> <!-- cd-timeline-block -->

                        </div> <!-- cd-timeline -->

                    </section>

                </div><!-- /content -->
            </div><!-- /tabs -->
            <script src="js/cbpFWTabs.js"></script>
            <script>
                                    new CBPFWTabs(document.getElementById('tabs'));
            </script>
        </div>


        <script>

            $(function () {
                pbsemua();
            });

function pbsemua(){
   pball();
                pbanalisis2();
                pbmetodologi2();
                pbkuesioner2();
                pbpengolahan2();
                pbumum2();
}
            function pball() {
                var all = parseInt(<?php echo $progressall; ?>);
                var progressbar = $("#progressall");
                var progressLabel = $("#labelall");
                $("#progressall").progressbar({
                    value: false,
                    change: function () {
                        progressLabel.text(
                                progressbar.progressbar("value") + "%");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < all) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            }
            function pbanalisis2() {
                var ana2 = parseInt(<?php echo $progressanalisis; ?>);
                var progressbar = $("#progressanalisis2");
                var progressLabel = $("#labelanalisis2");
                $("#progressanalisis2").progressbar({
                    value: false,
                    change: function () {
                        progressLabel.text(
                                progressbar.progressbar("value") + "%");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < ana2) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            }
            function pbumum2() {
                var umu2 = parseInt(<?php echo $progressumum; ?>);
                var progressbar = $("#progressumum2");
                var progressLabel = $("#labelumum2");
                $("#progressumum2").progressbar({
                    value: false,
                    change: function () {
                        progressLabel.text(
                                progressbar.progressbar("value") + "%");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < umu2) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            }
            function pbkuesioner2() {
                var kue2 = parseInt(<?php echo $progresskuesioner; ?>);
                var progressbar = $("#progresskuesioner2");
                var progressLabel = $("#labelkuesioner2");
                $("#progresskuesioner2").progressbar({
                    value: false,
                    change: function () {
                        progressLabel.text(
                                progressbar.progressbar("value") + "%");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < kue2) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            }
            function pbpengolahan2() {
                var peng2 = parseInt(<?php echo $progresspengolahan; ?>);
                var progressbar = $("#progresspengolahan2");
                var progressLabel = $("#labelpengolahan2");
                $("#progresspengolahan2").progressbar({
                    value: false,
                    change: function () {
                        progressLabel.text(
                                progressbar.progressbar("value") + "%");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < peng2) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            }
            function pbmetodologi2() {
                var met2 = parseInt(<?php echo $progressmetodologi; ?>);
                var progressbar = $("#progressmetodologi2");
                var progressLabel = $("#labelmetodologi2");
                $("#progressmetodologi2").progressbar({
                    value: false,
                    change: function () {
                        progressLabel.text(
                                progressbar.progressbar("value") + "%");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < met2) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            }
            function pbanalisis() {
                var ana = parseInt(<?php echo $progressanalisis; ?>);
                var progressbar = $("#progressanalisis");
                var progressLabel = $("#labelanalisis");
                $("#progressanalisis").progressbar({
                    value: false,
                    change: function () {
                        progressLabel.text(
                                progressbar.progressbar("value") + "%");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < ana) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            }
            function pbumum() {
                var umu = parseInt(<?php echo $progressumum; ?>);
                var progressbar = $("#progressumum");
                var progressLabel = $("#labelumum");
                $("#progressumum").progressbar({
                    value: false,
                    change: function () {
                        progressLabel.text(
                                progressbar.progressbar("value") + "%");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < umu) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            }
            function pbkuesioner() {
                var kue = parseInt(<?php echo $progresskuesioner; ?>);
                var progressbar = $("#progresskuesioner");
                var progressLabel = $("#labelkuesioner");
                $("#progresskuesioner").progressbar({
                    value: false,
                    change: function () {
                        progressLabel.text(
                                progressbar.progressbar("value") + "%");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < kue) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            }
            function pbpengolahan() {
                var peng = parseInt(<?php echo $progresspengolahan; ?>);
                var progressbar = $("#progresspengolahan");
                var progressLabel = $("#labelpengolahan");
                $("#progresspengolahan").progressbar({
                    value: false,
                    change: function () {
                        progressLabel.text(
                                progressbar.progressbar("value") + "%");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < peng) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            }
            function pbmetodologi() {
                var met = parseInt(<?php echo $progressmetodologi; ?>);
                var progressbar = $("#progressmetodologi");
                var progressLabel = $("#labelmetodologi");
                $("#progressmetodologi").progressbar({
                    value: false,
                    change: function () {
                        progressLabel.text(
                                progressbar.progressbar("value") + "%");
                    }
                });
                function progress() {
                    var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", val + 1);
                    if (val < met) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 3000);
            }
            
            
        </script>

        <style>/*
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
            */
            /* 
                Created on : Jan 21, 2015, 9:03:40 AM
                Author     : eko wahyu lestarri
            */

            /*! jQuery UI - v1.11.2 - 2014-10-16
            * http://jqueryui.com
            * Includes: core.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, draggable.css, menu.css, progressbar.css, resizable.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
            * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
            * Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
            .ui-progressbar {
                height: 2em;
                text-align: left;
                overflow: hidden;

            }
            .ui-progressbar .ui-progressbar-value {
                margin: 0px;
                height: 100%;
                border-radius: 20px; //yang barnya

            }

            .ui-progressbar .ui-progressbar-overlay {
                //  background: url("");
                height: 100%;
                filter: alpha(opacity=25); /* support: IE8 */
                opacity: 0.25;
            }
            .ui-progressbar-indeterminate .ui-progressbar-value {
                //background-image: none;
            }

            /* Component containers
            ----------------------------------*/
            .ui-widget {
                font-family: Verdana,Arial,sans-serif;
                font-size: 1.1em;
            }
            .ui-widget .ui-widget {
                font-size: 1em;
            }
            .ui-widget input,
            .ui-widget select,
            .ui-widget textarea,
            .ui-widget button {
                font-family: Verdana,Arial,sans-serif;
                font-size: 1em;
            }
            .ui-widget-content {
                // border: 1px solid #aaaaaa;
                //background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;

                background:  grey;//warna bar yang luar
                border:  grey;
                color: #222222;
                border-radius: 50px;
               -webkit-box-shadow: 0px 0px 4px 10px rgba(214,214,214,1);
-moz-box-shadow: 0px 0px 4px 10px rgba(214,214,214,1);
box-shadow: 0px 0px 4px 10px rgba(214,214,214,1);
            }
            .ui-widget-content a {
                color: #222222;
            }
            .ui-widget-header {
                //border: 1px solid #aaaaaa;
                //background: #cccccc url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
                //  background:red;//warna bar

                color: #222222;
                font-weight: bold;
                border-radius:20px;
                //add later
            }

            #progressanalisis .ui-widget-header, #progressanalisis2 .ui-widget-header{


                background: -moz-linear-gradient(left, rgba(18,27,196,1)80%, white);
                background: -o-linear-gradient(left, rgba(18,27,196,1) 80%,white);
                background: -ms-linear-gradient(left,   rgba(18,27,196,1) 80%,white);
                background: linear-gradient(to right,  rgba(18,27,196,1) 80%,white);
                border:  rgba(18,27,196,0.7) outset;
                
            }


            #progressmetodologi .ui-widget-header,  #progressmetodologi2 .ui-widget-header{


                background: -moz-linear-gradient(left,   rgba(115,255,0,1) 80%, white);
                background: -o-linear-gradient(left,   rgba(115,255,0,1) 80%,white);
                background: -ms-linear-gradient(left,   rgba(115,255,0,1) 80%,white);
                background: linear-gradient(to right,  rgba(115,255,0,1) 80%,white);
                border:  rgba(115,255,0,1) outset;
            }

            #progresskuesioner .ui-widget-header,  #progresskuesioner2 .ui-widget-header{


                background: -moz-linear-gradient(left,  yellow 80%, white);
                background: -o-linear-gradient(left,  yellow 80%,white);
                background: -ms-linear-gradient(left,  yellow 80%,white);
                background: linear-gradient(to right, yellow 80%,white);
                border: yellow outset;
            }

            #progresspengolahan .ui-widget-header,  #progresspengolahan2 .ui-widget-header{


                background: -moz-linear-gradient(left,  #00FF66 80%, white);
                background: -o-linear-gradient(left,  #00FF66 80%,white);
                background: -ms-linear-gradient(left,  #00FF66 80%,white);
                background: linear-gradient(to right, #00FF66 80%,white);
                border: #00FF66 outset;

            }
            #progressumum .ui-widget-header,  #progressumum2 .ui-widget-header{
                //warna bar
                background: -moz-linear-gradient(left,  #FF6E00 80%, white);
                background: -o-linear-gradient(left,  #FF6E00 80%,white);
                background: -ms-linear-gradient(left,  #FF6E00 80%,white);
                background: linear-gradient(to right, #FF6E00 80%,white);
                border: #FF6E00 outset;
            }
            #progressall  .ui-widget-header{

                background: -moz-linear-gradient(left,  #DC0054 80%, white);
                background: -o-linear-gradient(left,  #DC0054 80%,white);
                background: -ms-linear-gradient(left,  #DC0054 80%,white);
                background: linear-gradient(to right, #DC0054 80%,white);
                border: #DC0054 outset;
            }

            .ui-widget-header a {
                color: #222222;
            }
            .progress-label{
                position:absolute;
                left:45%;            
                color:black;
                font-size: 14pt;
                text-align: center;

            }
        </style>
        <?php
        $conn->close();
        include './footer.php';
        ?>

    </body>
</html>